<template>
    <div class="starWarp">
        <span :class="[`star-${size}`,`star`,`star-${star}`]"
              v-for="star in starList"></span>
    </div>
</template>

<script>
    const ON = "ON";
    const HALF = "HALF";
    const OFF = "OFF";
    export default {
        name: "Stars",
        props:{
            score:Number,
            size:String
        },
        computed:{
            starList(){
                //根据传过来的分数 得到一个数组来代表星星的个数
                // score:4.1  -->  ["ON","ON","ON","ON","OFF"]
                let res = [];//代表星星数组
                let length = 5; //代表星星数组的长度
                let score = this.score;//组件传来的分数

                //整数 或者 是带.5的小数
                //如果是整数: 这个整数代表的就是满星的数量;而且刚刚那个分数肯定没有进位;不用带half
                //如果是带.5的小数 : 小数的整数位就是满星的数量;而且刚刚那个分数肯定进位了;带half
                score = Math.floor(score*2)/2;

                //拿到score的整数位 这个整数就是满星的数量
                let OnMun = Math.floor(score);
                for(let i=0;i<OnMun;i++){
                    res.push(ON)
                }
                //该不该带半星
                let needHalf = (score % 1 === 0?false:true)
                needHalf ? res.push(HALF) : ""
                //暗星的数量  不管前面产生了多少星星 反正我们要使用暗星将星星数组填到5个位置
                while (res.length < length){
                    res.push(OFF)
                }

                return res;
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../common/css/mixin";
    .starWarp{
        .star{
            //不管使用的是24 还是 36 还是48 都需要的公共样式
            display: inline-block;
            background-repeat:no-repeat;
            background-size: 100% 100%;
            &.star-24{
                width:10px;
                height: 10px;
                margin-right: 5px;
                &:last-child{
                    margin-right: 0px;
                }
                &.star-ON{
                    .bg-image("star24_on")
                }
                &.star-HALF{
                    .bg-image("star24_half")
                }
                &.star-OFF{
                    .bg-image("star24_off")
                }
            }
            &.star-36{
                width:15px;
                height: 15px;
                margin-right: 8px;
                &:last-child{
                    margin-right: 0px;
                }
                &.star-ON{
                    .bg-image("star36_on")
                }
                &.star-HALF{
                    .bg-image("star36_half")
                }
                &.star-OFF{
                    .bg-image("star36_off")
                }
            }
            &.star-48{
                width:20px;
                height: 20px;
                margin-right: 10px;
                &:last-child{
                    margin-right: 0px;
                }
                &.star-ON{
                    .bg-image("star48_on")
                }
                &.star-HALF{
                    .bg-image("star48_half")
                }
                &.star-OFF{
                    .bg-image("star48_off")
                }
            }
        }
    }
</style>